<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>QQ音乐播放器</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/prefixfree.min.js" async></script>
    <!-- 计算REM -->
    <script>
        (function () {
            const computed = function computed() {
                let HTML = document.documentElement,
                    curW = HTML.clientWidth,
                    desW = 750;
                if (curW >= desW) {
                    HTML.style.fontSize = '100px';
                    return;
                }
                HTML.style.fontSize = `${curW / (desW / 100)}px`;
            };
            computed();
            window.addEventListener('resize', computed);

            /* 切换为横屏的提示 */
            window.addEventListener('orientationchange', function () {
                let rotate = Math.abs(window.orientation);
                if (rotate === 90) {
                    // 横屏
                    alert('横屏体验不佳，请您切换回竖屏！');
                    return;
                }
            });
        })();
    </script>
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header class="header_box">
            <div class="info">
                <img src="images/dzq.webp" class="cover" alt="">
                <div class="text">
                    <h2 class="title">《光年之外》</h2>
                    <h3 class="author">G.E.M. 邓紫棋</h3>
                </div>
            </div>
            <a href="javascript:;" class="music_btn"></a>
        </header>

        <!-- 主体 -->
        <main class="main_box">
            <div class="wrapper">
            </div>
        </main>

        <!-- 尾部 -->
        <footer class="footer_box">
            <div class="progress">
                <span class="cur_time">00:00</span>
                <div class="prog_bg">
                    <div class="prog_cur"></div>
                </div>
                <span class="total_time">00:00</span>
            </div>
            <a href="javascript:;" class="download">下载这首音乐</a>
        </footer>

        <!-- 遮罩层 -->
        <div class="bg_img"></div>
        <div class="bg_mark"></div>
        <audio src="images/gnzw.m4a" preload="none" class="myAudio"></audio>
    </div>

    <!-- IMPORT JS -->
    <script src="js/fastclick.js" defer></script>
    <script src="js/subscribe.js" defer></script>
    <script src="js/index.js" defer></script>
</body>

</html>